{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<br>
<style id ='style-height'>
    .layui-table td{
        height:50px;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
        word-wrap: normal | break-word ;
    }
    td .layui-form-select{
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
    }



</style>
<form class="layui-form" action="" id="cross_srh">
    <div class="proxy_srh">
        <div class="layui-inline">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <label class="layui-form-label">项目*：</label>
                    <div class="layui-input-inline">
                        <select class="layui-select" name="project_name" id="project_name" lay-verify="" lay-search
                                lay-filter="project_name">
                            <option value="">请选择</option>
                            {% for d in projectAll %}
                            <option value="{{d.id}}">{{d.project_name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="layui-input-inline">
                    <label class="layui-form-label">用例版本*：</label>
                    <div class="layui-input-inline" id="case_plan_div">
                        <select class="layui-select" name="case_plan" id="case_plan" lay-verify="" lay-search
                                lay-filter="case_plan">
                            <option value=''>＋新增用例版本</option>
                        </select>
                    </div>
                </div>
                <div class="layui-input-inline">
                    <label class="layui-form-label">主模块：</label>
                    <div class="layui-input-inline" id="case_mod_div">
                        <select class="layui-select" name="case_main_mod" id="case_main_mod" lay-verify="" lay-search
                                lay-filter="case_main_mod">
                            <option value=''>请选择</option>
                        </select>
                    </div>
                </div>
                <br><br>
                <div class="layui-input-inline">
                    <label class="layui-form-label">级别：</label>
                    <div class="layui-input-inline">
                        <select class="layui-select" name="case_pri" id="case_pri" lay-verify="" lay-search
                                lay-filter="case_pri">
                            <option value=''>请选择</option>
                            <option value='高'>高</option>
                            <option value='中'>中</option>
                            <option value='低'>低</option>
                        </select>
                    </div>
                </div>

                <div class="layui-input-inline">
                    <label class="layui-form-label">关键字：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="key_words" id="key_words" placeholder="请输入"
                               style="width:212px">
                    </div>
                </div>

                <div class="layui-inline" style="float:right;right: 2px">
                    <button class="layui-btn" type="button" id="start" lay-submit lay-filter="start">查询所有</button>
                </div>
            </div>
        </div>

    </div>
</form>

<hr class="layui-bg-gray">

<div class="layui-btn-group">
    <button data-type="add" class="layui-btn layui-btn-sm " id="add">
        <i class="layui-icon">&#xe654;</i>
    </button>

    <button data-type="subRow" class="layui-btn layui-btn-sm layui-btn-danger" id="subRow">
        <i class="layui-icon">&#xe640;</i>
    </button>

    <button class="layui-btn  layui-btn-sm " id="addAll" type="button">
        <i class="layui-icon"></i> 保存所有
    </button>
    <button class="layui-btn  layui-btn-sm layui-btn-danger" id="crtPlan" type="button">
        <i class="layui-icon"></i> 复制用例
    </button>



</div>

<div class="layui-input-inline" style="">
    <div class="layui-input-inline">
        <input type="text" class="layui-input" name="cellHeigh" id="cellHeigh" value="50"
               style="width:50px;height:30px">
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-sm" id="setHeight" lay-submit lay-filter="setHeight">列高</button>
    </div>
    <div class="layui-inline" >
        <span id="countAll" style="color:red"></span>
    </div>
</div>



<table class="layui-hide" id="baseCase" lay-filter="baseCase"></table>
<div id="demo0"></div>

<script type="text/html" id="filemange_v1">
    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="update_save">保存</button>
    <button type="button" class="layui-btn layui-btn-xs " lay-event="more_edit">高级</button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delNode"><i class="layui-icon">
        &#xe640;</i></button>

</script>


<script>
    layui.use(['table','code','laypage'], function(){
          var table = layui.table
          ,form = layui.form;
          var $= layui.jquery;
          var loading = layer.load();
          var CaseAll = new Array();
          var CaseAllCount = 0;
          var laypage = layui.laypage;



          var  options = {
                elem:'#baseCase',
                skin:"line",
                //page:true,
                height: 'full-230',
                toolbar: true,
                limit:5000,
                //limits:[100,500,1000],
                cols:[[
                       {type: 'checkbox'}
                      ,{type: 'numbers',title:'No.'}
                      ,{field: 'case_no', title: '用例编号',hide:true,sort:true}
                      ,{field: 'case_fun', title: '*设计*',width:110,sort:true, templet: function (d) {
                            return '<select name="case_fun" lay-filter="case_fun" data-value="'+d.case_fun+'">'+
                            '    <option value="">选择</option>'+
                            '    <option value="0">正向用例</option>'+
                            '    <option value="1">异常用例</option>'+
                            '    <option value="2">场景用例</option>'+
                            '    <option value="3">其它方法</option>'+
                            '</select>';

                       }}
                      ,{field: 'case_require_no', title: '需求编号',sort:true,hide:true,edit:'text'}
                      ,{field: 'case_main_mod', title: '主模块',width:100,edit:'text',sort:true}
                      ,{field: 'case_second_mod',hide:true, title: '子模块',edit:'text',sort:true}
                      ,{field: 'case_pri', title: '级别',width:75,sort:true, templet: function (d) {
                            return '<select name="case_pri" lay-filter="case_pri" data-value="'+d.case_pri+'">'+
                            '    <option value="">选择</option>'+
                            '    <option value="高">高</option>'+
                            '    <option value="中">中</option>'+
                            '    <option value="低">低</option>'+
                            '</select>';

                       }}
                      ,{field: 'case_pre', title: '前提',edit:'text',sort:true}
                      ,{field: 'case_title', title: '*标题*',edit:'text',sort:true}
                      ,{field: 'case_step', title: '步骤',edit:'text',sort:true}
                      ,{field: 'case_expect', title: '期待结果',edit:'text',sort:true}
                      ,{field: 'case_note', title: '备注',edit:'text',hide:true,sort:true,templet: function(d){
                            return d.case_note;
                      }}
                      ,{field: 'up_person', title: '最后操作人',sort:true,hide:true,templet: function(d){
                            return d.up_person_name;
                      }}
                      ,{field: 'update_time', title: '最后时间',sort:true,hide:true}
                      ,{field: 'id', title: 'id',sort:true,hide:true}
                      ,{field: 'imag_desc', title: '图片',sort:true,hide:true}
                      ,{field: 'autofun', title: '脚本',sort:true,hide:true}
                      ,{fixed: 'right', title:'', toolbar: '#filemange_v1',width:180}
                ]],
                id:'baseCase',
                data:CaseAll,
                done:function(res,cur,count){
                    //$("[data-field='id']").css('display','none');
                    //$("[data-field='imag_desc']").css('display','none');
                    //$("[data-field='autofun']").css('display','none');

                    var tableElem = this.elem.next('.layui-form.layui-border-box.layui-table-view');
                    count || tableElem.find('.layui-table-header').css('overflow', 'auto');
                    layui.each(tableElem.find('select'), function (index, item) {
                        var elem = $(item);
                        elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                    });

                    layui.each(res.data,function(index,item){
                         if(item.imag_desc==""||item.imag_desc==undefined){
                            }else{
                                $("tr[data-index='"+index+"']>td[data-field='case_title']").css('background','#efccd2');
                            }
                    });
                    form.render();

                    layer.close(loading);
                }
              };
          var tableIns = table.render(options);


          form.on('select(case_fun)', function(obj){
                  row = obj.elem.parentNode.parentNode.parentNode.rowIndex;
                  table.cache.baseCase[row].case_fun = obj.value;

                  form.render('select');
          });
          form.on('select(case_pri)', function(obj){
                  row = obj.elem.parentNode.parentNode.parentNode.rowIndex;
                  table.cache.baseCase[row].case_pri = obj.value;
                  form.render('select');
          });



          //setHeight
          $('#setHeight').on('click',function(){

                height = $('#cellHeigh').val();

                strStyle = '.layui-table td{height:'+height+'px;overflow:visible;text-overflow:inherit;white-space:normal;}';
                $("#style-height").html(strStyle);
          });
          //增加单元格
          $('#add').on('click',function(){

             data = table.cache['baseCase'];
             case_plan = $('#case_plan option:selected').text();
             case_type = $('#case_plan option:selected').val();
             project_id = $('#project_name option:selected').val();
             case_main_mod = $('#case_main_mod option:selected').val();

             userId = layui.data('test').UserInfo.userId;

             if(case_plan=="" ||project_id==""){
                layer.msg("项目、用例版本请选择!");
                return false;
             }
             for (var i=0;i<10;i++)
            {
                init_data ={"case_fun":"","autofun":"","imag_desc":"","up_person": userId, "case_require_no": "", "update_time": "", "case_expect": "", "case_step": "", "case_plan": case_plan, "case_no": "", "case_note": "", "case_title": "", "case_type": case_type, "is_show": 0, "case_second_mod": "", "case_pre": "", "id": "", "case_pri": "中", "project_id": project_id, "last_time": "", "in_person": userId, "case_main_mod": case_main_mod};
                data.push(init_data);
            }

             table.reload('baseCase',{data:data});
             return false;
          });

          var tabArr=new Array();
          table.on('checkbox(baseCase)', function(obj){
                  if(obj.type=="one"){
                    tabArr.push(obj);
                  }

          });


          //保存所有
          $('#addAll').on('click',function(){
                    var idList = new Array();
                    table.cache.baseCase.forEach(function(n,i){
                            if(n.case_title !="" && n.case_fun !="" &&n.case_fun!=null){
                                idList.push(n);
                            }
                    });

                    if(idList.length==0){
                       layer.msg("没有保存的行！标题、设计方法必须要填写，才会提交！");
                       return false;
                    }

                    $.ajax({
                                    //发出请求
                                    type:"POST",
                                    url:"/basecase/case/manage/saveAll",
                                    contentType: 'application/json; charset=utf-8',
                                    dataType:"json",
                                    data:JSON.stringify(idList),
                                    success: function(result){

                                        layer.msg("保存成功!");

                                    }
                    });

          });

          //点击删除
          $('#subRow').on('click',function(){

                layer.confirm('真的删除行么?', function(index){
                    var idList=new Array();

                    checkData = table.checkStatus('baseCase');
                    if(checkData.isAll){
                        checkData.data.forEach(function(n,i){
                            idList.push(n.id);
                        });
                    }else{
                            var idList=new Array();
                            layui.each(tabArr,function(k,v){
                                if(v.data.id !=""){
                                    idList.push(v.data.id);
                                }
                                v.del();
                            });
                            if(idList.length == 0){
                                return false;
                            }
                    }
                    $.ajax({
                                    //发出请求
                                    type:"POST",
                                    url:"/basecase/case/del",
                                    contentType: 'application/json; charset=utf-8',
                                    dataType:"json",
                                    data:JSON.stringify(idList),
                                    success: function(result){
                                        layer.close(index);
                                        layer.msg("删除成功!");
                                        if(checkData.isAll){
                                            $('#start').click();
                                        }
                                        //table.reload(options);
                                    }
                    });

                });

                return false;
          });


          form.on('select(project_name)', function(obj){
                $.ajax({
                         //发出请求
                        type:"GET",
                        url:"/basecase/casepaln/all?",
                        contentType: 'application/json; charset=utf-8',
                        dataType:"json",
                        data:{"project_id":obj.value},
                        success: function(result){
                            s1 = '<div class="layui-input-inline"> <select class="layui-select" name="case_plan" id="case_plan" lay-verify="" lay-search lay-filter="case_plan"><option value="">＋新增用例版本</option>';
                            e1 = '</select></div>';
                             if(result.data.length>0){

                                str = '';
                                layui.each(result.data,function(k,v){
                                        plan = v.case_plan;
                                        str = str+'<option value="'+plan+'">'+plan+'</option>'
                                });
                                htmlDiv = s1+str+e1;
                                $("#case_plan_div").html(htmlDiv);
                             }else{
                                $("#case_plan_div").html(s1+e1);
                             }
                             form.render();
                       }
                    });
                  form.render('select');
          });

          form.on('select(case_plan)', function(obj){
                if($('#case_plan option:selected').text() == "＋新增用例版本"){
                    if($('#project_name option:selected').val() == "" ){
                        layer.msg("请先选择项目!");
                        return;
                    }
                    //点击的新增计划
                    divRunContent = '<form class="layui-form" action="" id="cross_srhx" lay-filter="cross_srhx">'+
                        '    <div class="layui-inline"><br>'+
                        '        <div class="layui-input-inline">'+
                        '            <label class="layui-form-label">case_plan：</label>'+
                        '            <div class="layui-input-inline">'+
                        '                <input type="text" class="layui-input" required name="new_case_plan"  style="width:212px" id="new_case_plan">'+
                        '            </div>'+
                        '        </div>'+
                        '        <div class="layui-inline">'+
                        '            <button class="layui-btn" type="button" id="saveNewPlan" lay-submit lay-filter="saveNewPlan">保存</button>'+
                        '        </div>'+
                        '    </div>'+
                    '</form>';
                    index = layer.open({
                            type:1,
                            skin: 'demo-class',
                            content:divRunContent,
                            area:['409px','200px'],
                            //offset:  'rb',
                            title: "新增案例版本(保存用例后才会提交)",
                            closeBtn:1,
                            shade: 0,
                            shadeClose:true,
                            success: function(index, layero){
                            }
                     });
                     $('#saveNewPlan').on('click',function(){
                            case_plan = $('#new_case_plan').val();
                            project_id = $('#project_name option:selected').val();
                            if(case_plan == ""){
                                layer.msg("请填写后再保存");
                                return false;
                            }
                            $.ajax({
                                     //发出请求
                                    type:"GET",
                                    url:"/basecase/casePlan/exist?",
                                    contentType: 'application/json; charset=utf-8',
                                    dataType:"json",
                                    async: false,
                                    data:{"project_id":project_id,"case_plan":case_plan},
                                    success: function(result){
                                         if(result.isExist == true){
                                            layer.msg("该名称已经存在，请重新添加");
                                         }else{
                                            layer.msg("添加成功!");
                                            //向下拉框追加值，并选中
                                            plan = case_plan;
                                            $('#case_plan').append('<option value="'+plan+'">'+case_plan+'</option>');
                                            $("#case_plan").find("option[value='"+plan+"']").attr("selected",true);

                                            $('#saveNewPlan').hide();
                                            form.render();
                                         }
                                   }
                            });

                      });

                }else{
                    $.ajax({
                             //发出请求
                            type:"GET",
                            url:"/basecase/caseMainMod/all?",
                            contentType: 'application/json; charset=utf-8',
                            dataType:"json",
                            data:{"project_id":$('#project_name option:selected').val(),"case_plan":obj.value},
                            success: function(result){
                                s1 = '<div class="layui-input-inline"> <select class="layui-select" name="case_main_mod" id="case_main_mod" lay-verify="" lay-search lay-filter="case_main_mod"><option value="">请选择</option>';
                                e1 = '</select></div>';
                                 if(result.data.length>0){

                                    str = '';
                                    layui.each(result.data,function(k,v){
                                            str = str+'<option value="'+v.case_main_mod+'">'+v.case_main_mod+'</option>'
                                    });
                                    htmlDiv = s1+str+e1;
                                    $("#case_mod_div").html(htmlDiv);
                                 }else{
                                    $("#case_mod_div").html(s1+e1);
                                 }
                                 form.render();
                           }
                        });
                }
                form.render('select');
          });

          table.on('row(baseCase)', function(obj){
            obj.tr.css("background","greenyellow");
            if(obj.data.imag_desc==""||obj.data.imag_desc==undefined){
                }else{
                    obj.tr.css("background","#efccd2");
            }

          });

          table.on('edit(baseCase)', function(obj){
              obj.tr.css("background","greenyellow");
              if(obj.data.imag_desc==""||obj.data.imag_desc==undefined){
                    }else{
                        obj.tr.css("background","#efccd2");
                }

          });

          //更新或者删除案例
          table.on('tool(baseCase)', function(obj){
                if (obj.event ==='more_edit'){
                    //进入高级修改的页面
                    if($(".layui-layer-close").length >= 1 ){

                        $(".layui-layer-close").click();
                    }

                    if($(".layui-layer-close").length == 0 ){
                        layui.data('test', {key: 'RowBaseCase',value: obj.data});
                        index=layer.open({
                                                    type:2,
                                                    content:"/basecase/index/manage",
                                                    area:['850px','650px'],
                                                    offset:  'lb',
                                                    title:"编辑用例",
                                                    closeBtn:1,
                                                    shade: 0,
                                                    shadeClose:true,
                                                    maxmin: true,
                                                    cancel: function(index, layero){
                                                         //$('#start').click();
                                                    }
                        });
                    }

                } else if(obj.event === 'update_save'){
                    //单个保存
                    if(obj.data.case_title=="" && obj.data.case_fun==""){
                        layer.msg("标题、设计方法 必须填写！");
                        return false;
                    }
                    $.ajax({
                                    //发出请求
                                    type:"POST",
                                    url:"/basecase/case/manage",
                                    contentType: 'application/json; charset=utf-8',
                                    dataType:"json",
                                    data:JSON.stringify(obj.data),
                                    success: function(result){
                                        //obj.tr.css("background","greenyellow");
                                        if(result.id!=0){
                                            obj.update({id:result.id});
                                            layer.msg("保存成功!");
                                        }
                                    }
                    });

                }else if(obj.event==='delNode'){
                    layer.confirm('真的删除行么?', function(index){
                        $.ajax({
                                    //发出请求
                                    type:"POST",
                                    url:"/basecase/case/del",
                                    contentType: 'application/json; charset=utf-8',
                                    dataType:"json",
                                    data:JSON.stringify([obj.data.id]),
                                    success: function(result){
                                        obj.del();
                                        layer.close(index);
                                        layer.msg("删除成功!");
                                    }
                        });
                      });

                }
          });



          //点击查询
          $('#start').on('click',function(){

                search(1,10);
                laypage.render({
                elem: 'demo0'
                 ,layout: ['prev', 'page', 'next','count', 'limit']
                ,count: CaseAllCount
                ,limit: 10
                ,groups:2
                ,limits: [10, 50,100,500, 1000]
                ,jump: function(obj){
                  search(obj.curr,obj.limit);
                }
              });
          });

          function search(page,limit){
              var loading = layer.load();
              $.ajax({
                         //发出请求
                        type:"GET",
                        url:"/basecase/case/srh?",
                        async:false,
                        contentType: 'application/json; charset=utf-8',
                        dataType:"json",
                        data:{"project_id":$('#project_name option:selected').val(),
                              "case_plan": $('#case_plan option:selected').text(),
                              "main_module": $('#case_main_mod option:selected').val(),
                              "case_pri": $('#case_pri option:selected').val(),
                              "key_words": $('#key_words').val(),
                              "page":page,
                              "limit":limit
                              },
                        success: function(result){
                                CaseAll = result.data;
                                CaseAllCount = result.count;
                                table.reload('baseCase',{data:CaseAll});
                        }
              });


              layer.close(loading);
          };




          form.render();
          layer.close(loading);

    });


</script>
{% endblock %}